window.onload = function () {
    let data;
    ajax4();
    update:true;
    add:false;


    function  ajax4(){


        //1创建ajax对象
        let xmlHttpRequest = new XMLHttpRequest();
        //2配置向后端请求类型get post 异步请求数据
        xmlHttpRequest.open("post","/web_war_exploded/insertok",true);
        //3监听数据是否请求成功
        xmlHttpRequest.onreadystatechange=function (){
            //服务和客户端握手
            if (xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){//服务器解析成功
                if (xmlHttpRequest.status==200){//200表示成功返回
                    //responseText获取后端返回的数据存入data
                     data = JSON.parse(xmlHttpRequest.responseText);
                    init ();
                }
            }
        }

        //4发送请求
        xmlHttpRequest.send();
    }


    var pos;
    let tab = document.getElementById("tab")

    function init(){
        //1.逐条遍历数据
        for (let index = 0; index <data.length; index++){
            //生成一行tr
            let tr=document.createElement("tr")

            if(index %2 == 0){
                // tr.style.backgroundColor = "lightgreen";
            }
            //3.生成行内的td
            for(let j = 0; j<Object.keys(data[0]).length+2;j++){
                let td=document.createElement("td")
                tr.appendChild(td);//添加到tr
            }
            // 4.给每一行的td赋初值
            // tr.children[0].innerHTML = data[index].id;
            // tr.children[1].innerHTML = data[index].name;
            // tr.children[2].innerHTML = data[index].sex;
            // tr.children[3].innerHTML = data[index].age;
            // tr.children[4].innerHTML = data[index].tel;
            // tr.children[5].innerHTML = data[index].scores;
            // tr.children[6].innerHTML = data[index].school;

            for (let i = 0; i < Object.keys(data[0]).length; i++) {
                console.log("i:"+data[index][Object.keys(data[index])[i]]);
                console.log("----------");
                tr.children[i].innerHTML = data[index][Object.keys(data[index])[i]];
            }

            //5.创建操作按钮
            let button = document.createElement("button")
            let button1 =document.createElement("button")
            button.innerHTML= "删除";
            button1.innerHTML="更新" ;
            // button.style.backgroundColor = "#475a08"; // 将按钮背景颜色设置为红色
            // button1.style.backgroundColor = "#475a08"; // 将按钮背景颜色设置为蓝色
            button.style.cssText = "background-color: transparent; border: none;";
            button1.style.cssText = "background-color: transparent; border: none;";
            document.body.appendChild(button);
            document.body.appendChild(button1);
            //2.删除数据
            button.onclick = del(data[index].id);
            button1.onclick = update(index);
            //6.添加按钮对象
            tr.children[Object.keys(data[0]).length].appendChild(button)
            tr.children[Object.keys(data[0]).length+1].appendChild(button1)

            tab.appendChild(tr)
        }
    }

//删除
    function  del(index) {
        return function(){   //获取表单数据，组装成对象
            let data2={//入库
                id1:index
            }

            //字符串 对象--》后端--》对象 序列化
            let s=encodeURIComponent(JSON.stringify(data2))
            //1创建ajax对象
            let xmlHttpRequest = new XMLHttpRequest();
            //2配置向后端请求类型get post 异步请求数据
            xmlHttpRequest.open("get","/web_war_exploded/ajaxdel?datajson="+s,true);
            //3监听数据是否请求成功
            xmlHttpRequest.onreadystatechange=function (){
                //服务和客户端握手
                if (xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){//服务器解析成功
                    if (window.confirm("你确定要删除吗？")) {
                        data.splice(index, 1);
                        tab.innerHTML = "";
                        ajax4();
                    }
                }
            }
            //4发送请求
            xmlHttpRequest.send();
        }
    }

    //更新回显
    let updateindex=0;
    function update(index){
        return function(){

            var update=document.querySelector(".update");
            var add = document.querySelector(".add");
            update.style.display="block";
            add.style.display = "none"

            document.querySelector(".xm1").value=data[index].name;
            document.querySelector(".nl1").value=data[index].age;
            document.querySelector(".dh1").value=data[index].tel;
            document.querySelector(".cj1").value=data[index].scores;
            document.querySelector(".xx1").value=data[index].school;
            pos=index;
            updateindex=data[index].id//记录更新的数组下标
        }
    }

//数据添加
    let sum = document.getElementById("sum")
    sum.onclick = function(){
        //获取表单数据，组装成对象
        let xm = document.querySelector(".xm").value;
        let xb = document.querySelectorAll(".xb1")[0].checked ? "男" : "女";
        let nl = document.querySelector(".nl").value;
        let dh = document.querySelector(".dh").value;
        let cj = document.querySelector(".cj").value;
        let xx = document.querySelector(".xx").value;
        let data1={//入库
            xm1:xm,
            xb1:xb,
            nl1:nl,
            dh1:dh,
            cj1:cj,
            xx1:xx

        }

        //字符串 对象--》后端--》对象 序列化
        let s=encodeURIComponent(JSON.stringify(data1))
        //1创建ajax对象
        let xmlHttpRequest = new XMLHttpRequest();
        //2配置向后端请求类型get post 异步请求数据
        xmlHttpRequest.open("get","/web_war_exploded/ajaxinsert?datajson="+s,true);
        //3监听数据是否请求成功
        xmlHttpRequest.onreadystatechange=function (){
            //服务和客户端握手
            if (xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){//服务器解析成功
                if (xmlHttpRequest.responseText=="success"){
                    alert("数据入库成功")
                    var add1 = document.querySelector(".add");
                    add1.reset();
                    tab.innerHTML = "";
                    ajax4();
                }
            }
        }

        //4发送请求
        xmlHttpRequest.send();
    }

    //4实现更新
    let sub1 = document.getElementById("sub1")
    sub1.onclick = function () {
        let id = updateindex;
        let xm = document.querySelector(".xm1").value;
        let xb = document.querySelectorAll(".xb1")[0].checked ? "男" : "女";
        let nl = document.querySelector(".nl1").value;
        let dh = document.querySelector(".dh1").value;
        let cj = document.querySelector(".cj1").value;
        let xx = document.querySelector(".xx1").value;
        //更新这条数据
        let data3 = {
            id: id,
            name: xm,
            sex: xb,
            age: nl,
            tel: dh,
            scores: cj,
            school: xx
        }
            let s=encodeURIComponent(JSON.stringify(data3))
            //1创建ajax对象
            let xmlHttpRequest = new XMLHttpRequest();
            //2配置向后端请求类型get post 异步请求数据
            xmlHttpRequest.open("get","/web_war_exploded/ajaxupdate?datajson="+s,true);
            //3监听数据是否请求成功
            xmlHttpRequest.onreadystatechange=function (){
                //服务和客户端握手
                if (xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){//服务器解析成功
                    if (xmlHttpRequest.responseText=="success"){
                        alert("数据更新成功")
                        var update1 = document.querySelector(".update");
                        update1.reset();
                        tab.innerHTML = "";
                        ajax4();
                    }
                }
            }

            //4发送请求
            xmlHttpRequest.send();
        var add = document.querySelector(".add");
        add.style.display = "block";

    }
}